<template>
	<view class="box">
		<view class="list">
			<view class="left">
				<radio :checked="item.goods_status" color="#c00000" v-if="showRadio" @click="changeRadio"></radio>
				<image :src="item.goods_small_logo || defaultImg" mode=""></image>
			</view>
			<view class="right">
				<view class="title">{{item.goods_name}}</view>
				<view class="bottom">
					<view class="price">￥{{item.goods_price | toFixed}}</view>
					<!-- uni-number-box是uni-app自带的数字选项框  min最小单位 value里面的值 color颜色 v-if销毁与重建 @change自带的方法-->
					<uni-number-box :min="1" :value="item.goods_count" color="black" v-if="showNum" @change="changeNum"></uni-number-box>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入辅助函数
	import {mapMutations} from 'vuex';
	export default {
		name:"goods-item",
		props:{
			item:{
				type:Object,
				default:{}
			},
			// 因为不是只有一个页面使用该组件 如果不设置这个 就会所有页面都有单选框
			showRadio:{
				type:Boolean,
				// 设置默认值为false
				default:false
			},
			// 和showRadio同理
			showNum:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				// 默认渲染不出来的图片
				defaultImg:"http://image3.suning.cn/uimg/b2c/newcatentries/0070061155-000000000617064184_1_200x200.jpg",
			};
		},
		filters:{
			// 转换数据格式
			toFixed(num){
				// toFixed保留两位小数
				return Number(num).toFixed(2);
			}
		},
		methods:{
			// 展开updateState这个方法
			// ...mapMutations('car',['updateState']),
			changeRadio(){
				// 获取最新的status
				const goods_id_status = {
					goods_id : this.item.goods_id,
					// 取反是因为每次点击都是相反的布尔值 true点击变为false false点击变为true
					goods_status : !this.item.goods_status,
				}
				// $emit触发父组件内的事件 传递参数
				this.$emit('radioChange',goods_id_status);
			},
			// 当选项框里面的值改变的时候 触发父组件的numChange方法 更新state里的数据
			changeNum(value){//value为数字选择框内的值
				//当触发changeNum时 触发父组件内的numChange方法 将最新的goods_id和goods_count传递过去
				this.$emit('numChange',{
					goods_id:this.item.goods_id,
					goods_count:value
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.box{
 width: 95%;
 padding: 20rpx;
 .list{
  display: flex;
  border-bottom: 4rpx solid #C0C0C0;
  padding: 10rpx;
  .left{
   width: 30%;
   padding-right: 10rpx;
   display: flex;
   align-items: center;
   image{
    width: 100%;
    height: 200rpx;
   }
  }
  .right{
   width: 70%;
   .title{
    font-size: 30rpx;
    height: 200rpx;
   }
   .bottom{
	   display: flex;
	   justify-content: space-around;
	   .price{
	    font-size: 40rpx;
	    color: #C00000;
	   }
   }
  }
 }
}
</style>